<template>
  <div id="newsInstallPage" class="newsInstallPage">
    <div class="actionBar">
      <div>
        当前状态：共<span>{{total}}</span>条
      </div>
      <div>
        <div class="build" @click="colBuild">+新增</div>
        <el-dialog :visible.sync="dialogBuild"
                  size="tiny" title="新建">
          <el-form label-width="100px" id="form1">
            <el-form-item label="栏目图标">
              <input type="file" name="file" ref="file" @change="getFile($event)"/>
              <div class="verclsImg" v-show="formData.clsIcon">
                <img :src="formData.clsIcon">
              </div>
            </el-form-item>
            <el-form-item label="栏目标题">
              <el-input v-model="formData.title" name="title"></el-input>
            </el-form-item>
            <el-form-item label="条目数量">
              <el-input v-model="formData.indexLimit" name="index_limit"></el-input>
            </el-form-item>
            <el-form-item label="首页展示">
              <el-radio-group v-model="formData.showIndex">
                <el-radio class="radio" :label="1" name="show_index">是</el-radio>
                <el-radio class="radio" :label="0" name="show_index">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <input type="hidden" name="token" v-model="formData.token">
            <el-button type="primary" @click="colSubmit">提交</el-button>
          </el-form>
        </el-dialog>
      </div>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th>排序</th>
          <th>栏目图标</th>
          <th>栏目标题</th>
          <th>首页展示</th>
          <th>首页展示条目数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData">
          <td>{{index + 1}}</td>
          <td><img :src="item.clsIcon" class="clsicon" /></td>
          <td><p class="tl">{{item.clsName}}</p></td>
          <td>{{item.showIndex | transTf}}</td>
          <td>{{item.indexLimit}}</td>
          <td :id="item.clsId" class="operate">
            <i class="clstop" @click="clstop($event, index)" title="向上">向上</i>
            <i class="clsdown" @click="clsdown($event, index)" title="向下">向下</i>
            <i class="el-icon-edit" @click="edit(item.clsId, index)"></i>
            <i class="el-icon-delete" @click="remove(item.clsId)"></i>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
  // import axios from 'axios'
  export default{
    name: 'newsInstallPage',
    data () {
      return {
        total: 0,
        tableData: [],
        dialogBuild: false,
        form_token: '',
        formData: {
          file: '',
          title: '',
          indexLimit: '',
          showIndex: '',
          clsId: '',
          clsIcon: ''
        }
      }
    },
    beforeCreate () {
      this.$store.commit('CHANGESTATE', [1, 0])
      this.$store.commit('CHANGESTATECOL', [0, 1])
    },
    created () {
      this.axios(1)
    },
    methods: {
      // 加载页面
      axios (index) {
        this.$axios({
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          url: this.$store.state.baseURI + 'oss/info/class/list',
          method: 'get',
          params: {
            page_num: index,
            token: this.$store.state.token
          }
        }).then(obj => {
          console.log(obj)
          if (obj.data.code === 100) {
            this.total = obj.data.data.total
            this.tableData = obj.data.data.list
          } else {
            this.$router.push('/')
          }
        })
      },
      // 新建
      colBuild () {
        this.dialogBuild = true
        this.getFormToken()
      },
      // 修改
      edit (clsId, index) {
        console.log(clsId)
        this.formData.clsId = clsId
        this.formData.title = this.tableData[index].clsName
        this.formData.file = ''
        this.formData.indexLimit = this.tableData[index].indexLimit
        this.formData.showIndex = this.tableData[index].showIndex ? 1 : 0
        this.formData.clsIcon = this.tableData[index].clsIcon
        this.dialogBuild = true
      },
      remove (clsId) {
        console.log(1)
        this.$axios({
          method: 'POST',
          url: process.env.API_ROOT + 'oss/info/class/delete',
          params: {
            cls_id: clsId,
            token: this.$store.state.token
          }
        }).then(obj => {
          console.log(obj)
          if (obj.data.code === 100) {
            this.axios(1)
          }
        })
      },
      // 栏目排序向上
      clstop (event, index) {
        this.$axios({
          method: 'POST',
          url: process.env.API_ROOT + 'oss/info/class/sort',
          params: {
            token: this.$store.state.token,
            frt_id: this.tableData[index].clsId,
            frt_rank: this.tableData[index - 1].rank,
            sec_id: this.tableData[index - 1].clsId,
            sec_rank: this.tableData[index].rank
          }
        }).then(obj => {
          if (obj.data.code === 100) {
            this.axios(1)
          }
        })
      },
      clsdown (event, index) {
        this.$axios({
          method: 'POST',
          url: process.env.API_ROOT + 'oss/info/class/sort',
          params: {
            token: this.$store.state.token,
            frt_id: this.tableData[index].clsId,
            frt_rank: this.tableData[index + 1].rank,
            sec_id: this.tableData[index + 1].clsId,
            sec_rank: this.tableData[index].rank
          }
        }).then(obj => {
          if (obj.data.code === 100) {
            this.axios(1)
          }
        })
      },
      getFile (event) {
        this.formData.file = event.target.files[0]
      },
      colSubmit () {
        var formData = new FormData()
        var that = this
        formData.append('token', this.$store.state.token)
        formData.append('form_token', this.form_token)
        formData.append('file', this.formData.file)
        formData.append('title', this.formData.title)
        formData.append('index_limit', this.formData.indexLimit)
        formData.append('show_index', this.formData.showIndex)
        var xhr = new XMLHttpRequest()
        if (this.formData.clsId === '') {
          xhr.open('POST', that.$store.state.baseURI + 'oss/info/class/add')
        } else {
          formData.append('cls_id', this.formData.clsId)
          xhr.open('POST', that.$store.state.baseURI + 'oss/info/class/update')
        }
        xhr.onload = function (event) {
          console.log(xhr.responseText)
          if (xhr.status === 200) {
            var obj = JSON.parse(xhr.responseText)
            console.log(obj)
            that.axios(1)
            if (obj.code === 100) {
              that.dialogBuild = false
              that.$message({
                message: '操作成功',
                type: 'success'
              })
            } else {
              that.$message.error(obj.message)
            }
          }
        }
        xhr.send(formData)
      }
    },
    filters: {
      transTf (str) {
        if (str) {
          return '是'
        } else {
          return '否'
        }
      }
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss">
  .clsicon{
    width: 40px;
    height: 40px;
  }
  .newsInstallPage{
    overflow: hidden;
    .clstop,
    .clsdown{
      cursor: pointer;
      text-indent: -9999px;
      width: 24px;
      height: 24px;
      display: inline-block;
      background: url(./../../../assets/images/top.png);
      background-size: cover;
    }
    .clstop{
      transform: rotate(180deg);
    }
    .el-form-item__content{
      text-align: left;
      margin-right: 50px;
      .el-date-editor.el-input{
        width: 100%;
      }
    }
    .el-dialog__header{
      text-align: left;
      border-bottom: 1px solid #e8e8e8;
      padding: 15px 20px 14px 20px;
      line-height: 20px;
    }
    .el-dialog__body{
      .el-button{
        width: 130px;
      }
      .verclsImg{
        width: 40px;
        height: 40px;
        float: right;
        img{
          width: 100%;
          height: 100%;
          border-radius: 3px;
        }
      }
    }
    .operate{
      i{
        cursor: pointer;
      }
    }
  }
  
</style>
